body {
margin:0; padding:0; width:100%; background-color:#000000;
}

#main {
width:100%; position:absolute;
}

#menu {
position:fixed; line-height:4em; top:-1.0em; left:0; z-index:1; background-color:#000000; width:100%; opacity:0.8; filter:alpha(opacity=80);
}

#menu li {
font-family:Vollkorn; font-size:1.2em; font-weight:400; color:#FFFFFF; text-decoration:none; list-style-type:none; display:inline; padding:0.5em;  opacity:1; filter:alpha(opacity=100);
}

#menu li a {
text-decoration:none; color:#FFFFFF;
}

#sprache {
position:fixed; margin:0; right:1em; z-index:1; font-family:Vollkorn; font-size:1em; font-weight:700; text-decoration:none; list-style-type:none; line-height:2em;
}

h1 {
position:fixed; top:-0.4em; right:1em; z-index:1; font-family:Vollkorn; font-style:regular; font-size:700%; color:#F7DEAD; opacity:0.7;
}

#wichtig {
position:fixed; top:12em; left:2em; background-color:#CCCCCC; opacity:0.8; filter:alpha(opacity=80); font-family:Vollkorn; letter-spacing:0.1em; padding:1em;
}

#neu {
position:relative; top:12em; left:22em; width:63%; background-color:#CCCCCC; opacity:0.9; filter:alpha(opacity=80); font-family:Vollkorn; letter-spacing:0.1em; padding:1em; text-align:center;
}

#kunftig {
position:relative; margin-top:22em; margin-left:22em; width:63%; background-color:#CCCCCC; font-family:Vollkorn; letter-spacing:0.1em; padding:1em; text-align:center;
}

#gestrig {
position:relative; margin-top:12em; width:72%; background-color:#CCCCCC; opacity:0.9; filter:alpha(opacity=80); font-family:Vollkorn; letter-spacing:0.1em; padding:1em; text-align:center;
}

#Textfeld {
position:relative; top:10em; width:72%; background-color:#777777; font-family:Vollkorn; letter-spacing:0.1em; text-align:left; padding:3em;
}

#Textfeld1 {
position:relative; top:10em; width:72%; background-color:#CCCCCC; font-family:Vollkorn; letter-spacing:0.1em; text-align:left; padding:2em; opacity:0.7; filter:alpha(opacity=70);
}

#Textfeld2 {
position:static; margin-top:17em; width:78%; background-color:#FFFFFF;font-family:Vollkorn; letter-spacing:0.1em; text-align:left;
}

#Textfeld3 {
width:78%; background-color:#FFFFFF; margin-top:7em; font-family:Vollkorn; letter-spacing:0.1em; text-align:left;
}

#Textfeld4 {
width:78%; background-color:#FFFFFF; margin-top:7em; margin-bottom:7em; font-family:Vollkorn; letter-spacing:0.1em; text-align:left;
}

#Textfeld5 {
position:relative; top:14em; margin-bottom:28em; font-family:Vollkorn; font-size:0.8em; letter-spacing:0.1em; color:#DFCAC7; width:81%; background-color:#000000;
}

#Textfeld6 {
position:relative; top:14em; margin-bottom:28em; margin-left:-1em; font-family:Vollkorn; font-size:0.8em; letter-spacing:0.1em; text-align:left; color:#CCCCCC; width:81%; background-color:#000000;
}

#Textfeld7 {
position:relative; top:14em; margin-bottom:28em; font-family:Vollkorn; font-size:0.8em; letter-spacing:0.1em; color:#F7DEAD; width:81%; background-color:#000000;
}

#Textfeld8 {
position:relative; top:14em; margin-bottom:28em; font-family:Vollkorn; font-size:0.8em; letter-spacing:0.1em; color:#87C1B0; width:81%; background-color:#000000;
}

#Textfeld9 {
position:relative; top:21em; margin-bottom:28em; padding:1em; font-family:Vollkorn; font-size:0.8em; letter-spacing:0.1em; color:#F7DEAD; width:81%; background-color:#000000;
}

#Textfeld10 {
position:relative; top:12em; width:72%; background-color:#000000; font-family:Vollkorn; padding:1em;
}


h2 {
letter-spacing:0.5em; color:#F7DEAD
}



h5 {
font-style:regular; font-size:1.5em; opacity:0.7; letter-spacing:0.4em;
}

p1 {
font-size:80%;
}

p2 {
text-transform:uppercase;
}

p3 {
margin-left:4.5em; font-family:Vollkorn; font-style:regular; font-size:2em; color:#F7DEAD; opacity:0.7; 
letter-spacing:0.5em;
}

p5 {
color:#CCCCCC; text-decoration:none;
}

#Chronik {
position:absolute; margin-top:13em; margin-left:23em; font-family:Vollkorn; letter-spacing:0.1em; color:#CCCCCC;
}

a {
color:#000000; text-decoration:none;
}

p4 {
color:#000000; text-decoration:none;
}

#album {
position:relative; width:72%; font-family:Vollkorn; letter-spacing:0.1em; text-align:center; text-transform:uppercase; color:#666666; padding:3em; filter:alpha(opacity=50);
}

h3 {
font-size:1em; color:#333333; letter-spacing:0.2em; text-transform:none;
}

p6 {
color:#F7DEAD; font-size:1em; letter-spacing:0.2em; text-transform:none;
}

p7 {
color:#777777; font-size:120%;
}

table {
margin-bottom:10em;
}

#test {
position:relative; width:80%; margin-top:16em; margin-bottom:7em; padding-top:2em; padding-bottom:2em; font-family:Vollkorn; font-size:0.8em; letter-spacing:0.1em; color:#F7DEAD; background-color:#000000; opacity:0.9; filter:alpha(opacity=90);
}

#test2 {
position:relative; width:80%; margin-top:7em; margin-bottom:7em; font-family:Vollkorn; letter-spacing:0.1em; color:#777777; background-color:#FFFFFF; opacity:0.9; filter:alpha(opacity=90);
}

#test3 {
position:relative; width:80%; margin-top:7em; margin-bottom:7em; padding-top:2em; padding-bottom:2em;   background-color:#000000; opacity:0.9; filter:alpha(opacity=90);
}

#test4 {
position:relative; width:78%; margin-top:7em; margin-bottom:7em; padding-top:1em; font-family:Vollkorn; letter-spacing:0.1em; color:#000000; background-color:#FFFFFF; 
}

#test9 {
position:relative; width:78%; margin-top:7em; margin-bottom:7em; font-family:Vollkorn;  letter-spacing:0.1em; color:#777777;  background-color:#FFFFFF;
}

#test10 {
position:relative; width:78%; margin-top:1em; margin-bottom:7em; font-family:Vollkorn; letter-spacing:0.1em; color:#777777; background-color:#000000;
}


li {
text-decoration:none; list-style-type:none; margin-bottom:10em;
}

a:link {
opacity:1; filter:alpha(opacity=100);
}

a:hover {
opacity:0; filter:alpha(opacity=0); letter-spacing:0.2em;
}


#Bodenb {
width:100%; position:absolute; bottom:0; background-color:#000000; height:5em; text-align:center; padding:1em 0em 1em 0em; color:#F7DEAD;
}

#Bodenb a {
color:#f7dead;
}



* {
  box-sizing: border-box;
}



.h1 {
position:absolute; top:0.5em; right:1em; z-index:1; font-family:Vollkorn; font-style:regular; font-size:700%; color:#F7DEAD; opacity:0.7;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 1200px) {
  .h1 {
    font-size:540%;
    margin-top:0.5em;
    margin-right:0;
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .h1 {
    font-size:420%;
    margin-top:1em;
    margin-right:auto;
    margin-left:auto;
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 600px) {
  .h1 {
    font-size:300%;
    margin-top:1em;
    margin-right:auto;
    margin-left:auto;
  }
}



.h4 {
   font-family:Vollkorn;
   font-style:regular;
   font-size:2em;
   opacity:0.8; filter:alpha(opacity=80);
   letter-spacing:0.4em;
   color:#F7DEAD;
   margin-top:1em;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .h4 {
    font-size:1.5em;
    letter-spacing:0.2em;
  }
}



.flex-container6 {
    display:flex
    font-family:Vollkorn;
    letter-spacing:0.1em;
    line-height:1.5em;
    color:#777777;
    margin-bottom:18em;
}

.clearfix6 {  
    overflow:auto;
    width:72%;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
    opacity:0.9; filter:alpha(opacity=90);
    padding:0.5em;
}

.flex-container6 table {
  margin-bottom:0;
}

.img6 {
    width:56%;
    float:left;
    margin-right:1.5em;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 1000px) {
  .img6, .flex-container6 table {
    width:100%;
    float:top;
    margin-right:0;
    margin-bottom:1.5em;
  }
}



.flex-container7 {
    display:flex
    font-family:Vollkorn;
    letter-spacing:0.1em;
    line-height:1.5em;
    color:#F7DEAD;
    margin-bottom:18em;
}

.clearfix7 {  
    overflow:auto;
    width:72%;
    margin-left:auto;
    margin-right:auto;
    background-color:#000000;
    opacity:0.9; filter:alpha(opacity=90);
    padding:0.5em;
}

.img7 {
    width:56%;
    float:left;
    margin-right:1.5em;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 1000px) {
  .img7 {
    width:100%;
    float:top;
    margin-right:0;
    margin-bottom:1.5em;
  }
}



.flex-container8 {
    display:flex
    font-family:Vollkorn;
    letter-spacing:0.1em;
    line-height:1.5em;
    color:#DFCAC7;   
    margin-bottom:18em; 
}

.clearfix8 {  
    overflow:auto;
    width:72%;
    margin-left:auto;
    margin-right:auto;
    background-color:#000000;
    opacity:0.9; filter:alpha(opacity=90);
    padding:0.5em;
}

.img8 {
    width:64%;
    float:right;
    margin-top:28%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 1200px) {
  .img8 {
    width:100%;
    float:bottom;
    margin-bottom:1.5em;
  }
}


.img9 {
    width:42%;
    float:left;
    margin-right:1.5em;
    margin-bottom:0;
}


.flex-container10 {
    display:flex
    font-family:Vollkorn;
    letter-spacing:0.1em;
    line-height:1.5em;
    color:#DFCAC7;  
    margin-bottom:64%;  
}

.clearfix10 {  
    overflow:auto;
    width:72%;
    margin-left:auto;
    margin-right:auto;
    background-color:#000000;
    opacity:0.9; filter:alpha(opacity=90);
    padding:0.5em;
}

.img10 {
    width:60%;
    float:left;
    margin-right:1.5em;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 1000px) {
  .img9, .img10 {
    width:100%;
    float:top;
    margin-right:0;
    margin-bottom:1.5em;
  }
}



.flex-container {
  display: flex;
  flex-direction:row;
  width:80%;
  margin-top:7em;
  margin-bottom:7em;
  margin-left:auto;
  margin-right:auto;
  background-color:#FFFFFF;
  opacity:0.9; filter:alpha(opacity=90);
}

.flex-item-left {
  flex: 42%;
  padding:0.2em;
}

.flex-item-right {
  flex: 58%;
  padding:6em 1.5em;
  font-family:Vollkorn;
  letter-spacing:0.1em;
  text-align:left;
  color:#777777;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 800px) {
  .flex-container {
    flex-direction: column;   
  }
}



.flex-item1 {
  display:flex;
  flex-direction:column;
  width:56%;
  margin-top:16em;
  margin-bottom:0.5em;
  margin-left:auto;
  margin-right:auto;
  font-family:Vollkorn;
  text-align:center;
  letter-spacing:0.1em;
  color:#F7DEAD;
  background-color:#000000;
  opacity:0.9; filter:alpha(opacity=90);
  padding:1.5em;
}

.flex-container1 {
  display: flex;
  flex-direction:row;
  width:56%;
  margin-bottom:18em;
  margin-left:auto;
  margin-right:auto;
}

.flex-container1 table {
  margin-bottom:0;
}

.flex-item-left1 {
  display:flex;
  width:50%;
  margin-bottom:0;
}

.flex-item-right1 {
  display:flex;
  width:50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 1000px) {
  .flex-container1, .flex-item1 {  
    width:72%; 
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 720px) {
  .flex-container1, .flex-item1 {
    flex-direction: column;  
    width:64%; 
  }
  .flex-item-left1, .flex-item-right1 {
    width:100%;
  }
}



.flex-item2 {
  display:flex;
  flex-direction:column;
  width:72%;
  margin-bottom:0.5em;
  margin-left:auto;
  margin-right:auto;
  font-family:Vollkorn;
  text-align:center;
  letter-spacing:0.1em;
  color:#F7DEAD;
  background-color:#000000;
  opacity:0.9; filter:alpha(opacity=90);
  padding:1.5em;
}

.flex-container2 {
  display: flex;
  flex-direction:row;
  width:72%;
  margin-bottom:18em;
  margin-left:auto;
  margin-right:auto;
}

.flex-container2 table {
  margin-bottom:0;
}

.flex-item-left2 {
  display:flex;
  width:50%;
}

.flex-item-right2 {
  display:flex;
  width:50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 700px) {
  .flex-container2 {
    flex-direction: column;    
  }
  .flex-item-left2, .flex-item-right2 {
    width:100%;
  }
}



.flex-item3 {
  display:flex;
  flex-direction:column;
  width:72%;
  margin-bottom:0.5em;
  margin-left:auto;
  margin-right:auto;
  font-family:Vollkorn;
  text-align:center;
  letter-spacing:0.1em;
  color:#F7DEAD;
  background-color:#000000;
  opacity:0.9; filter:alpha(opacity=90);
  padding:1.5em;
}

.flex-container3 {
  display: flex;
  flex-direction:row;
  width:72%;
  margin-bottom:18em;
  margin-left:auto;
  margin-right:auto;
}

.flex-container3 table {
  margin-bottom:0;
}

.flex-item-leftleft3 {
  display:flex;
  width:15%;
}

.flex-item-left3 {
  display:flex;
  width:15%;
}

.flex-item-center3 {
  display:flex;
  width:15%;
}

.flex-item-right3 {
  display:flex;
  width:15%;
}

.flex-item-rightright3 {
  display:flex;
  width:15%;
}


/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 700px) {
  .flex-container3 {
    flex-direction: column;  
    width:64%; 
  }
  .flex-item3 {
    width:64%;
  }
}



.flex-container4 {
  display: flex;
  flex-direction:row;
  width:64%;
  margin-bottom:18em;
  margin-left:auto;
  margin-right:auto;
}

.flex-item-left4 {
  flex: 50%;
  margin-right:0.5em;
}

.flex-item-right4 {
  flex: 50%;
}

.flex-container4 table {
  margin-bottom:0;
}


/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 1000px) {
  .flex-container4 {
    flex-direction: row;   
    width:72%;
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 720px) {
  .flex-container4 {
    flex-direction: column;   
    width:64%;
  }
  .flex-item-left4 {
    margin-left:auto;
    margin-right:auto;
  }
}



.flex-item5 {
  display:flex;
  width:72%;
  margin-bottom:0.5em;
  margin-left:auto;
  margin-right:auto;
}

.flex-container5 {
  display: flex;
  flex-direction:row;
  width:72%;
  margin-bottom:18em;
  margin-left:auto;
  margin-right:auto;
  background-color:#000000;
  padding:1.5em;
  font-family:Vollkorn;
  font-size:1em;
  letter-spacing:0.1em;
}

.flex-item-left5 {
  flex: 50%;
  color:#CCCCCC;
  text-align:left;
  padding:1em;
}

.flex-item-center5 {
  flex: 50%;
  color:#F7DEAD;
  text-align:center;
  padding:1em;
}

.flex-item-right5 {
  flex: 50%;
  color:#CCCCCC;
  text-align:left;
  padding:1em;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media screen and (max-width: 1000px) {
  .flex-container5 {
    flex-direction: column;   
    width:72%;
  }
}


<!-- mehrere Textfelder mit Liste ausprobieren --> 
